<template>
    <views class="facilitator_list_look">
        <div class="header">
            <div class="header_title" :class="{active: baseInfo}" @click="changeStatus('baseInfo')" >基本信息</div>
            <div class="header_title" :class="{active: isParam}" @click="changeStatus('isParam')">参数详情</div>
            <div class="header_title" :class="{active: isRate}" @click="changeStatus('isRate')">费率详情</div>
        </div>
        <div class="content">
            <!-- 基本信息 -->
            <facilitator-base v-show="baseInfo" :type=0 ></facilitator-base>

            <!-- 参数详情 -->
            <facilitator-param-detail v-show="isParam"  :type=0  ></facilitator-param-detail>   

            <!-- 费率详情 -->
            <facilitator-rate v-show="isRate" :type=0  ></facilitator-rate>
        </div>
    </views>
</template>

<script>
    import FacilitatorBase from 'components/facilitator/facilitator_list/child_component/child_component/facilitator_base';
    import FacilitatorRate from 'components/facilitator/facilitator_list/child_component/child_component/facilitator_rate';
    import FacilitatorParamDetail from 'components/facilitator/facilitator_list/child_component/child_component/facilitator_param_detail';


export default {
    name:"FacilitatorListLook",
    components: {
        FacilitatorBase,
        FacilitatorRate,
        FacilitatorParamDetail
    },
    data(){
          return {
              baseInfo: true,           //基本信息是否显示
              isRate: false,          //费率详情是否显示
              isParam: false,           //参数详情是否显示
              facilitator_id: 0         //服务商ID
          }
    },
    mounted(){
            this.facilitator_id = this.$route.query.facilitator_id;
            this.$setRouteTitle();
    },
    methods:{
        changeStatus(select){
            switch(select){
                case 'baseInfo':
                    if(!this.baseInfo){
                        this.isRate = false;
                        this.isParam = false;
                        this.baseInfo = true;
                    }   
                    break;
                case 'isRate':
                    if(!this.isRate){
                        this.baseInfo = false;
                        this.isParam = false;
                        this.isRate = true;
                    }   
                    break;
                case 'isParam':
                    if(!this.isParam){
                        this.baseInfo = false;
                        this.isRate = false;
                        this.isParam = true;
                    }   
                    break;
            }     
        },
    }
}
</script>

<style lang="less" :scope="true" >
    .facilitator_list_look{
        padding:0 10px;
        font-size: 14px;
        background: #fff;

        .active{
            color: #4280f2;
            border-bottom: 2px solid #4280f2
        }

        .header{
            display: inline-block;
            margin:10px auto;
            width: 100%;
            border-bottom: 1px solid #e0e0e0;

            .header_title{
                width: 70px;
                height: 50px;
                margin: 0 10px;
                line-height: 50px;
                text-align: center;
                float: left;
                
            }
        }

        .content{
            margin: 10px;
        }

    }

</style>>